<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坐标转换</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #app {
            width: 1200px;
            margin: 0 auto;
            padding-top: 20px;
        }

        .coordinate {
            width: 100%;
        }

        #map {
            margin: 8px 0;
            width: 100%;
            height: 520px;
            background-color: cornsilk;
        }

        table {
            border-collapse: collapse;
            text-align: center;
        }

        table td,
        table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }

        table thead th {
            background-color: #cce8eb;
            width: 50%;
        }

        table tr:nth-child(odd) {
            background-color: #fff;
        }

        table tr:nth-child(even) {
            background-color: #f5fafa;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '312cb1c8f3d0418a31395ff766460aab',
        }
    </script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=b5158127c43b716443d6acb5a9112894"></script>
    <script type="text/javascript" src="https://unpkg.com/gcoord@0.3.2/dist/gcoord.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue@3.2.44/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>
        <label>坐标系：</label>
        <label><input type="radio" name="type" value="WGS84" v-model="inputType">WGS84(国际通用)</label>
        <label><input type="radio" name="type" value="GCJ02" v-model="inputType">GCJ02(高德、QQ地图)</label>
        <label><input type="radio" name="type" value="BD09" v-model="inputType">BD09(百度地图)</label>
    </p>
    <textarea class="coordinate" v-model="input" cols="100" rows="6" :placeholder="placeholder"></textarea>
    <div id="map"></div>
    <p>
        <label>转换结果：</label>
        <label><input type="radio" name="result" value="WGS84" v-model="outputType">WGS84(国际通用)</label>
        <label><input type="radio" name="result" value="GCJ02" v-model="outputType">GCJ02(高德、QQ地图)</label>
        <label><input type="radio" name="result" value="BD09" v-model="outputType">BD09(百度地图)</label>
    </p>
    <table>
        <thead>
        <tr>
            <th>输入的坐标</th>
            <th>转换后坐标</th>
        </tr>
        </thead>
        <tr v-for="item in result" :key="item.id">
            <td>{{ item.originalCoords.join(',') }}</td>
            <td>{{ item.transformCoords.join(',') }}</td>
        </tr>
    </table>
</div>
<script>
    const {createApp, ref, computed} = window.Vue;

    createApp({
        setup() {
            const input = ref('');
            const inputType = ref('GCJ02');
            const outputType = ref('WGS84');
            const placeholder = '一行一个，如：116.4133837,39.91092455\r单次最多支持10000个';
            const inputList = computed(() => {
                const list = input.value.replaceAll(' ', '').split(/\n/);
                return list.map(str => {
                    let [lng, lat] = str.split(',');
                    lng = +lng;
                    lat = +lat;
                    if (!lng || !lat || (lng < 0 || lng > 180) || (lat < 0 || lat > 90)) {
                        return null;
                    }
                    return [lng, lat];
                }).filter(Boolean);
            });
            const result = computed(() => {
                const idPrefix = Date.now() + '_';
                return inputList.value.map((coords, index) => {
                    let [lng, lat] = coords;
                    if (inputType.value !== outputType.value) {
                        [lng, lat] = gcoord.transform(coords, gcoord[inputType.value], gcoord[outputType.value]);
                    }
                    lng = lng.toFixed(7) / 1;
                    lat = lat.toFixed(7) / 1;
                    return {
                        id: idPrefix + (index + 1),
                        originalCoords: coords,
                        transformCoords: [lng, lat],
                    };
                });
            });
            return {input, inputType, outputType, placeholder, inputList, result};
        },
    }).mount('#app');
</script>
</body>
</html>